<template>
  <div>
    <el-upload
        ref="upload"
        multiple
        name="File"
        action=""
        :auto-upload="false"
        :http-request="httpRequest"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <span slot="tip" class="el-upload__tip">&nbsp;&nbsp;&nbsp;只能上传dll/xml文件</span>
    </el-upload>

    <el-button type="primary" @click="newForm" size="mini">确 定</el-button>
  </div>

<!--  <el-button @click="editDialog = false" size="mini">取 消</el-button>-->
</template>

<script>
import axios from "axios"
export default {
name: "upload2",
  data () {
    return {
      newData:{},
      file:[]
    }
  },
  methods:{
    httpRequest(param) {
      this.file.push(param.file);// 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
    },
    // 提交
    newForm(){
      var upData = new FormData();
      this.$refs.upload.submit();// 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
      this.file.forEach(function (file) {// 因为要上传多个文件，所以需要遍历
        upData.append('bytes', file, file.name);
        // upData.append('file', this.file); //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
      })
     // 这里需要转换一下格式传给后台
      axios
          .post('http://liuzy.hicp.net/file/upload',upData)
          .then(function(response) {

              console.log(response)

          })
          .catch(function(error) {
            console.log(error);
          });
    }
  }
}
</script>

<style scoped>

</style>